<template>
  <div v-if="welcome" class="welcome">
    <van-circle
      class="time"
      v-model="currentRate"
      :rate="100"
      :speed="20"
      :text="`${text}S`"
      size="38px"
      v-on:click.native="into"
    />
    <img src="../../images/welcome.jpeg" alt="" />
    <h1>爱尚小超</h1>
  </div>
  <div v-else class="login">
    <div class="phone">
      <input type="text" placeholder="输入手机号" v-model.trim="phone" /><span
        @click="getver"
        >发送验证码
        <span v-if="second">({{ second }})</span>
      </span>
    </div>
    <div class="verification">
      <input type="text" placeholder="输入验证码" v-model.trim="ver" />
    </div>
    <div class="exephone">
      <van-checkbox v-model="cphone" checked-color="#ee0a24"
        >记住手机号</van-checkbox
      >
    </div>
    <div class="exelog">
      <van-checkbox v-model="cexelog" checked-color="#ee0a24"
        >免登陆</van-checkbox
      >
    </div>
    <div class="loginBtn">
      <button @click="login">登录</button>
    </div>
    <div class="footer">
      <span @click="$router.push('/register')">没有账号去注册</span>
    </div>
  </div>
</template>
<script>
//引入接口
import { getCodeApi, loginApi } from "../../apis/loginApi";
export default {
  data() {
    return {
      welcome: true,
      currentRate: 0,
      text: 5,
      cphone: false,
      cexelog: false,
      phone: "",
      ver: "",
      second: 0,
    };
  },
  created() {
    //欢迎页面倒计时
    // let s =this.$route.query
    if(this.$route.query.s){
        this.welcome = false;
    }
    let time = setInterval(() => {
      if (this.text === 1) {
        clearInterval(time);
        this.welcome = false;
      }
      this.text -= 1;
    }, 1000);

    //判断是否有token
    let autoText = localStorage.getItem('autoToken')
    if (autoText) {
      this.$store.commit("aishang/token",JSON.parse(autoText));
      this.$router.push("/home");
    }

    let autoPhone = JSON.parse(localStorage.getItem("phone"));
    if (autoPhone) {
      this.cphone = true;
      this.phone = autoPhone;
    }
  },

  methods: {
    into() {
      if (this.text <= 3) {
        this.welcome = false;
      }
    },
    //获取验证码getCodeApi
    getver() {
      if (this.second === 0) {
        if (/^1[3-9][0-9]{9}/g.test(this.phone)) {
          getCodeApi({ phone: this.phone }).then((data) => {
            if (data.code === 200) {
              this.$toast({
                message: `验证码${data.data.code}`,
                position: "bottom",
              });
              this.second = 60;
              let secondN = setInterval(() => {
                if (this.second === 1) {
                  clearInterval(secondN);
                }
                this.second -= 1;
              }, 1000);
            } else {
              this.$toast.fail(data.message);
            }
          });
        } else {
          //手机号正则错误
          this.$toast.fail("请输入正确手机号");
        }
      } else {
        return;
      }
    },

    //登录
    login() {
      if (/^1[3-9][0-9]{9}/g.test(this.phone)) {
        if (this.ver.length == 4) {
          loginApi({
            phone: this.phone,
            code: this.ver,
          }).then((data) => {
            if (data.data) {
              //登录成功
              if (this.cphone) {
                localStorage.setItem("phone", this.phone);
              } else {
                localStorage.removeItem("phone");
              }
              if (this.cexelog) {
               localStorage.setItem("autoToken", JSON.stringify(data.data));
              } else {
                //不免登录
                 localStorage.removeItem("autoToken");
              }
               this.$store.commit("aishang/token", data.data);
              this.$router.push("/home");
            } else {
              this.$toast.fail("验证码不正确");
            }
          });
        } else {
          this.$toast.fail("请输入4位验证码");
        }
      } else {
        //手机号正则错误
        this.$toast.fail("请输入正确手机号");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.welcome {
  width: 100%;
  height: 100%;
  > img {
    width: 100%;
    height: 100%;
  }
  > h1 {
    font-size: 35px;
    position: absolute;
    left: calc(50% - 70px);
    top: 30vh;
  }
  > .time {
    position: absolute;
    right: 5vh;
    top: 5vh;
  }
}
.login {
  width: 100%;
  height: 100%;
  background: url("../../images/loginback.jpeg") center center / 100% 100%
    no-repeat;
  padding: 5rem 30px;
  > .exephone {
    margin-bottom: 20px;
    font-size: 0.8rem;
    color: rgb(24, 221, 221);
  }
  > .exelog {
    margin-bottom: 30px;
    font-size: 0.8rem;
  }
  > .phone {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid rgb(201, 205, 209);
    display: flex;
    margin-bottom: 40px;
    input {
      border: none;
      outline: none;
      font-size: 0.9rem;
      width: 8rem;
      background-color: transparent;
      flex: 1;
    }
    > span {
      font-size: 0.9rem;
      display: block;
      border-left: 1px solid rgb(165, 159, 159);
      padding-left: 10px;
      height: 1.1rem;
      color: red;
      >span{
        font-size: .8rem;
      }
    }
  }
  > .verification {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid rgb(201, 205, 209);
    margin-bottom: 40px;
    input {
      border: none;
      outline: none;
      font-size: 0.9rem;
      width: 8rem;
      background-color: transparent;
      flex: 1;
    }
  }
  > .loginBtn {
    button {
      width: 100%;
      height: 2.5rem;
      border-radius: 0.5rem;
      border: none;
      background-color: rgb(255, 187, 0);
      color: rgb(255, 255, 255);
    }
  }
  > .footer {
    margin-top: 30px;
    > span {
      font-size: 0.8rem;
      color: red;
      float: right;
    }
  }
}
</style>